<template>
	<view class="package-setting">
		<zero-custom-bar title="套餐设置" :effect='false' :fixedHolder='true' :singleIcon="true" backgroundColor='#FFF'>
			<view slot='left'>
				<view @click="goBackPage" class="back-btn">
					<uni-icons type="left" size="24"></uni-icons>
				</view>
			</view>
		</zero-custom-bar>
		<view class="header-box">
			<view>开启套餐</view>
			<switch :checked="packageStatus" color="#FF9600" @change="packageStateChange" />
		</view>
		<view class="card-box">
			<view class="card" v-for="(item,index) in packageList" :key="index">
				<view class="card-item card-item-title">名称：{{item.packageName}}</view>
				<view class="card-item">
					<text>价格：￥{{item.price}}元</text>
					<text style="margin-left: 40rpx;">续费价格：￥{{item.renewPrice}}元/小时</text>
				</view>
				<view class="card-item">时长：{{item.hour}}小时</view>
				<view>
					<view class="card-item">适用时段：</view>
					<view v-for="(time,id) in item.timePeriodList" :key="id">
						<text>{{time.timePeriodName}}：</text>
						<text v-for="(date,idx) in time.weekArr" :key="idx">
							<text>{{weekObj[date]}} </text>
							<text v-if="idx<time.weekArr.length-1">、</text>
						</text>
						<text>({{time.startTime}} 至 {{time.endTime}})</text>
					</view>
				</view>

				<view class="flex-box">
					<view class="card-item"></view>
					<view class="btn-box">
						<view class="edit-btn" @click="openPop('edit',item)">编辑</view>
						<view class="delete-btn" @click="deleteEvent(item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore">暂无更多</view>
		<view class="footer-box">
			<text class="add-btn" @click="openPop('add')">添加套餐</text>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area='false'>
			<view class="pop-box">
				<view class="pop-title">{{type==='add'?'新增套餐':'编辑套餐'}}</view>
				<view class="pop-content">
					<view class="pop-item">
						<view class="pop-item-title">套餐名称：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.packageName" placeholder="请输入套餐名称"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">套餐时长：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.hour" placeholder="请输入套餐时长"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">套餐价格：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.price" placeholder="请输入套餐价格"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">续费价格：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.renewPrice" placeholder="请输入续费价格"></uni-easyinput>
					</view>
					<view class="pop-item">
						<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据"
							@selection-change="selectionChange">
							<uni-tr>
								<uni-th width="80" align="center">时段名称</uni-th>
								<uni-th width="100" align="center">日期范围</uni-th>
								<uni-th width="80" align="center">时间段</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in timeList" :key="index">
								<uni-td align="center">{{ item.timePeriodName }}</uni-td>
								<uni-td align="center">
									<text v-for="(date,id) in item.weekArr" :key="id">{{weekObj[date]}} <text
											v-if="id<item.weekArr.length-1">、</text> </text>
								</uni-td>
								<uni-td align="center">{{ item.startTime }} ~ {{ item.endTime }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
				<view class="pop-btn-box">
					<view class="cancel-btn" @click="closePop">取消</view>
					<view class="submit-btn" @click="submitEvent">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId: '',
				packageStatus: false,
				weekObj: {
					sun: '周日',
					mon: '周一',
					tue: '周二',
					wed: '周三',
					thu: '周四',
					fri: '周五',
					sat: '周六',
				},
				packageList: [],
				currentConfig: {
					packageName: '',
					price: '',
					hour: '',
					renewPrice: '',
					timePeriodList: []
				},
				type: '',
				selectedIndexs: [],
				timeList: []
			};
		},
		methods: {
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			// 切换套餐启用状态
			packageStateChange(e) {
				this.packageStatus = e.detail.value
				const data = {
					productId: this.productId,
					packageStatus: this.packageStatus
				}
				this.$request({
					method: 'post',
					url: `/applet/store/product/updatePackageStatus`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					if (res.code === 500) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('查询异常：', err)
				})

			},
			// 重置数据
			resetData() {
				this.currentConfig = {
					packageName: '',
					price: '',
					hour: '',
					renewPrice: '',
					timePeriodList: []
				}
				this.selectedIndexs = []
			},
			// 打开弹窗
			openPop(type, item) {
				this.type = type
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (type === 'edit') {
					this.currentConfig = JSON.parse(JSON.stringify(item));
				} else {
					this.resetData()
				}
				this.$refs.popup.open('center')
			},
			closePop() {
				this.$refs.popup.close()
			},
			// 添加/编辑套餐
			submitEvent() {
				if (!this.currentConfig.packageName) {
					uni.showToast({
						title: '请输入套餐名称',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.currentConfig.hour) {
					uni.showToast({
						title: '请输入套餐时长',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.currentConfig.price) {
					uni.showToast({
						title: '请输入套餐价格',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.currentConfig.renewPrice) {
					uni.showToast({
						title: '请输入续费价格',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (this.selectedIndexs.length === 0) {
					uni.showToast({
						title: '请勾选时间段',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				const data = this.currentConfig
				data.shopId = this.shopId
				data.productId = this.productId
				data.timePeriodIdList = []
				this.selectedIndexs.forEach((val) => {
					data.timePeriodIdList.push(this.timeList[val].timePeriodId)
				})
				let methods = ''
				if (this.type === 'add') {
					methods = 'post'
				} else {
					methods = "put"
				}
				//保存设备
				this.$request({
					method: methods,
					url: '/applet/store/productPackage',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if(res.code === 200){
						this.getPackageList();
						this.closePop()
						this.resetData()
					}else{
						uni.showToast({
							title:res.msg,
							duration:2000,
							icon:'none'
						})
					}
				})
			},

			// 删除账号
			deleteEvent(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该套餐？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							const data = {
								shopId: this.shopId
							}
							this.$request({
								method: 'DELETE',
								url: `/applet/store/productPackage/${item.packageId}`,
								data,
								loading: false,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.getPackageList()
									uni.showToast({
										title: '删除成功',
										duration: 2000,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: res.msg,
										duration: 2000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.error('接口异常：', err)
							})
						}
					}
				})
			},
			//获取套餐列表
			getPackageList() {
				const data = {
					productIdList: [this.productId],
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productPackage/list`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					this.packageList = res.rows || []
					this.packageList.forEach((item) => {
						item.timePeriodList.forEach((time) => {
							time.weekArr = time.weeks.split(',')
						})
					})
				}).catch(err => {
					console.error('查询异常：', err)
				})
			},
			//获取时段列表
			getTimeList() {
				const data = {
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productTimePeriod/list`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					this.timeList = res.rows || []
					this.timeList.forEach((item) => {
						item.weekArr = item.weeks.split(',')
					})
				}).catch(err => {
					console.error('查询异常：', err)
				})
			},
			// 返回上一页
			goBackPage() {
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('reload', {
					packageStatus: this.packageStatus
				})
				uni.navigateBack()
			}
		},
		onLoad(options) {
			this.productId = options.productId
			this.shopId = options.shopId
			if (options.packageStatus === 'true') {
				this.packageStatus = true
			}
			this.getPackageList()
			this.getTimeList()
		}
	}
</script>

<style lang="scss" scoped>
	.package-setting {
		padding-bottom: 112rpx;

		::v-deep .checkbox__inner {
			border-color: #ccc !important;
		}

		::v-deep .checkbox--indeterminate {
			border-color: #ff9600 !important;
			background-color: #ff9600 !important;
		}

		::v-deep .is-checked {
			border-color: #ff9600 !important;
			background-color: #ff9600 !important;
		}

		// #ifdef H5
		::v-deep .tool_bar {
			margin-top: 10rpx !important;
		}

		::v-deep .nav_name {
			font-size: 32rpx !important;
		}

		// #endif

		.header-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 30rpx 0 30rpx;
		}

		.card-box {
			padding: 30rpx;
		}

		.card {
			background: #FFF;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px #CCC;
			margin-bottom: 20rpx;
		}

		.card-item {
			color: #333;
			line-height: 64rpx;
		}

		.card-item-title {
			font-weight: bold;
			color: #000;
			font-size: 32rpx;
		}

		.flex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-box {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-top: 20rpx;

			.edit-btn {
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1px solid #ff9600;
			}

			.delete-btn {
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #ff9600;
				margin-left: 20rpx;
			}
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			text-align: center;
			background: #FFF;

			.add-btn {
				display: inline-block;
				color: #FFF;
				background: #ff9600;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 10rpx 60rpx;
			}
		}

		.pop-box {
			background: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			width: 730rpx;

			.pop-content {
				max-height: 800rpx;
				overflow-y: auto;
			}

			.pop-title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.pop-item-title {
				width: 140rpx;
				text-align: right;
			}

			.pop-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}

			.pop-unit {
				margin-left: 10rpx;
			}

			.pop-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 60rpx;

				.cancel-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #CCC;
				}

				.submit-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #FFF;
					background: #ff9600;
				}
			}
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

		.back-btn {
			padding-left: 16rpx;
		}
	}
</style>